<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <style>
        h1,
        p {
            margin: 0;
            font-weight: normal;
        }
        
        .my-alert {
            width: 500px;
            margin: 50px auto;
            box-shadow: 1px 3px 5px #333;
        }
        
        .header {
            height: 44px;
            padding: 0 15px;
            line-height: 44px;
            box-sizing: border-box;
        }
        
        .header h1 {
            font-size: 16px;
        }
        
        .content {
            padding: 15px;
            box-sizing: border-box;
        }
        
        .btn-group {
            height: 34px;
            margin: 30px 0;
            padding: 0 15px;
        }
        
        button {
            float: right;
            height: 34px;
            padding: 15px 0;
            border: none;
            outline: none;
            background-color: #fff;
            color: #666;
            border-radius: 5px;
        }
        
        .danger .header {
            background-color: red;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- <div class="my-alert danger show"> -->
        <!-- 添加某个样式类名的真假值 -->
        <!-- <div class="my-alert" :class='{ show:isShow, danger: hasError }'> -->
        <!-- 直接将值定义在data中 计算属性中-->
        <!-- <div class="my-alert" :class='alertClassObject'> -->
        <!-- 使用数组的方式绑定class，第一个参数为静态的 -->
        <!-- <div :class="['my-alert',showClass,errorClass]"> -->
        <!-- 使用数组的方式绑定class，并判断 -->
        <div :class="['my-alert',
            isShow? showClass:'',
            isShow && hasError?errorClass:'']">

            <header class="header">
                <h1>{{title}}</h1>
            </header>
            <div class="content">
                <p>{{content}}</p>
            </div>
            <div class="btn-group">
                <!-- :Style :js对象 数组 -->
                <!-- <button :style="{
                    color:'#fff',
                    <!-- 两种方式都可以 -->
                <!-- 'background-color':'red', -->
                <!-- backgroundColor:'red', -->
                <!-- 使用变量 -->
                <!--  backgroundColor:btnBgColor
                }">按钮</button> -->
                <!-- 使用对象 -->
                <!-- <button 
                :style="btnStyle">按钮</button> -->
                <!-- 使用数组，多个style合并为一个 -->
                <!-- <button :style="[btnStyle,commonBtnStyle]">按钮</button> -->
                <!-- 渲染数组中最后一个被浏览器支持的值
                如果浏览器本身支持不带前缀的值，那就渲染不带前缀的值 -->
                <!-- <button :style="{display:['-webkit-box','-ms-flexbox','flex']}">按钮</button> -->
                <!-- :style使用中，vue会在运行时自动检测添加相应的前缀 -->
                <button :style="[btnStyle,{'-webkit-transition':'opacity .3s'}]">按钮</button>
            </div>
        </div>

    </div>
    <script type="text/javascript">
        /**
         * class  style的试图绑定
         * v-bind 在标签上绑定属性
         * vue对:class/style进行了特殊的封装
         * 形式是比较多的，对象和数组的绑定方式
         * */
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    title: 'class',
                    content: '内容',
                    isShow: true,
                    hasError: true,
                    // alertClassObject: {
                    //     show: true,
                    //     danger: true
                    // }
                    showClass: 'show',
                    errorClass: 'danger',
                    btnBgColor: 'red',
                    btnStyle: {
                        color: '#fff',
                        backgroundColor: 'red'
                    },
                    commonBtnStyle: {
                        borderRadius: '15px'
                    }
                }
            },
            computed: {
                alertClassObject() {
                    return {
                        show: this.isShow,
                        danger: this.isShow && this.hasError
                    }
                }
            },
            mounted() {
                // $attrs->父组件通过调用组件时的传递的属性的集合  $attributes
            },
            methods: {

            }
        })
    </script>
</body>

</html>